<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <StrokeTitle2 title="数据统计" class="float margin" style="width: 99%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" @change="radioChange1" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" />
          <!-- <ElementSelect ref="psNameSelect" :data="selectList" :isSelected="true" @select="selectList1" /> -->
        </div>
        <div class="flex_center Echarts" style="height:100%" slot="content">

          <div class="bzjk_box flex_between">
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  全员人均产出
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  环比分析
                </div> -->
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number">
                    {{ top.qy1 }}
                  </div>

                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.qy2<0? 'numberRight': '' ">
                    {{ top.qy2  }}%
                  </div>
                </div> -->
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  单班产出率
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  环比分析
                </div> -->
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number">
                    {{ top.db1}}
                  </div>
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.db2<0? 'numberRight': '' ">
                    {{ top.db2}}%
                  </div>
                </div> -->
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  不达标项数量
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  环比分析
                </div> -->
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number">
                    {{ top.bdb1 }}
                  </div>
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.bdb2<0? 'numberRight': '' ">
                    {{ top.bdb2  }}%
                  </div>
                </div> -->
              </div>
            </div>
            <img src="@/assets/images/echarts/zu2.png" alt="" class="and" />
            <div class="cntj_item backgroung">
              <nav class="flex_center">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  维修费用
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  环比分析
                </div> -->
              </nav>
              <div class="cntj_item_content flex_between">
                <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number">
                    {{ top.sj1 }}
                  </div>
                </div>
                <!-- <div class="cntj_item_content_item flex_center_direction cntj_item_content_item">
                  <div class="number" :class="top.sj2<0? 'numberRight': '' ">
                    {{ top.sj2  }}%
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_center">
      <StrokeTitle2 title="统计分析" class="float margin" style="width: 99%" :isCenter="true">
        <!-- <div class="flex_center" style="position: absolute; top: 40px" > -->
        <ElementRadio slot="select" v-model="model" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" :isButton="true"
          @change="radioChange2" />
        <!-- </div> -->
        <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange2" /> -->
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament title="人均产出" style="margin: 20px 0 5px 0"></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 220px">
            <div style="width:150px;height: 150px;margin-left:-25px;" class="flex_center_direction">
              <Ring class="ring" :data="{allRate:center1.a1}" subtext="" titleTop="42%" />
              <div class="label" style="margin-top:1px;text-align:center">实际值(标准箱)</div>
            </div>
            <div class="contrasts_box">
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">
                  环比变化
                </div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">

                    <div class="baifenbi " v-if="center1.permom>=0">
                      {{center1.permom}}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" v-if="center1.permom>0">
                    </div>
                    <div class="baifenbi text_shadow_danger" v-else>
                      {{center1.permom}}%
                      <img src="@/assets/images/echarts/jiang.png" alt="">
                    </div>
                  </div>
                  {{center1.mom}}
                </div>
              </div>
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">
                  同比变化
                </div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">

                    <div class="baifenbi " v-if="center1.peryoy>=0">
                      {{center1.peryoy}}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" v-if="center1.peryoy>0">
                    </div>
                    <div class="baifenbi text_shadow_danger" v-else>
                      {{center1.peryoy}}%
                      <img src="@/assets/images/echarts/jiang.png" alt="">
                    </div>
                  </div>
                  {{center1.yoy}}
                </div>
              </div>
            </div>

            <!-- <PieImg legendLabel="" style="height: 180px; margin-top: -15px" legendLeft="38%" :data="top21" titleLeft="25.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.93" cirLeft="0.7" :img="require('@/assets/images/echarts/ywl.png')" /> -->
            <!-- <div class="title">{{ top2[0] }}</div> -->
          </div>
        </div>
        <div class="backBor" slot="content"></div>
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament title="单班产出率" style="margin: 20px 0 5px 0"></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 220px">
            <div style="width:150px;height: 150px;margin-left:-25px;" class="flex_center_direction">
              <Ring class="ring" :data="{allRate:center2.a1}" subtext="" titleTop="42%" />
              <div class="label" style="margin-top:1px;text-align:center">实际值</div>
            </div>
            <div class="contrasts_box">
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">
                  环比变化
                </div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">

                    <div class="baifenbi " v-if="center2.permom>=0">
                      {{center2.permom}}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" v-if="center2.permom>0">
                    </div>
                    <div class="baifenbi text_shadow_danger" v-else>
                      {{center2.permom}}%
                      <img src="@/assets/images/echarts/jiang.png" alt="">
                    </div>
                  </div>
                  {{center2.mom}}
                </div>
              </div>
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">
                  同比变化
                </div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">

                    <div class="baifenbi " v-if="center2.peryoy>=0">
                      {{center2.peryoy}}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" v-if="center2.peryoy>0">
                    </div>
                    <div class="baifenbi text_shadow_danger" v-else>
                      {{center2.peryoy}}%
                      <img src="@/assets/images/echarts/jiang.png" alt="">
                    </div>
                  </div>
                  {{center2.yoy}}
                </div>
              </div>
            </div>

            <!-- <PieImg legendLabel="" style="height: 180px; margin-top: -15px" legendLeft="38%" :data="top21" titleLeft="25.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.93" cirLeft="0.7" :img="require('@/assets/images/echarts/ywl.png')" /> -->
            <!-- <div class="title">{{ top2[0] }}</div> -->
          </div>
        </div>
        <div class="backBor" slot="content"></div>
        <div class="flex_center_direction bdb_box" slot="content">
          <StrokeOrnament title="维修费用" style="margin: 20px 0 5px 0"></StrokeOrnament>
          <div class="flex_center Echarts" style="height: 220px">
            <div style="width:150px;height: 150px;margin-left:-25px;" class="flex_center_direction">
              <Ring class="ring" :data="{allRate:center3.a1}" subtext="" titleTop="42%" />
              <div class="label" style="margin-top:1px;text-align:center">实际值(元/千标准箱)</div>
            </div>
            <div class="contrasts_box">
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">
                  环比变化
                </div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">

                    <div class="baifenbi " v-if="center3.permom>=0">
                      {{center3.permom}}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" v-if="center3.permom>0">
                    </div>
                    <div class="baifenbi text_shadow_danger" v-else>
                      {{center3.permom}}%
                      <img src="@/assets/images/echarts/jiang.png" alt="">
                    </div>
                  </div>
                  {{center3.mom}}
                </div>
              </div>
              <div class="contrasts_box_item flex_center">
                <div class="left_box flex_between_direction">
                  同比变化
                </div>
                <div class="right_box flex_center_direction">
                  <div class="right_box_top flex_center">

                    <div class="baifenbi " v-if="center3.peryoy>=0">
                      {{center3.peryoy}}%
                      <img src="@/assets/images/echarts/sheng.png" alt="" v-if="center3.peryoy>0">
                    </div>
                    <div class="baifenbi text_shadow_danger" v-else>
                      {{center3.peryoy}}%
                      <img src="@/assets/images/echarts/jiang.png" alt="">
                    </div>
                  </div>
                  {{center3.yoy}}
                </div>
              </div>
            </div>

            <!-- <PieImg legendLabel="" style="height: 180px; margin-top: -15px" legendLeft="38%" :data="top21" titleLeft="25.5%" titleTop="89%" cirTop="1" :isTitle="true" length="5" itemWidth="0.93" cirLeft="0.7" :img="require('@/assets/images/echarts/ywl.png')" /> -->
            <!-- <div class="title">{{ top2[0] }}</div> -->
          </div>
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_bottom">
      <StrokeTitle2 title="当年十二月数据" class="float margin" style="width: 99%">
        <el-select v-model="bottomForm" placeholder="请选择" size="mini" style="width:160px" @change="kanbanPan12"
          slot="select">
          <el-option v-for="item in [{label:'人均产出',value:'rj'},{label:'单班产出率',value:'db'},{label:'维修费用',value:'wx'}]"
            :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <MoreDirection3 :data="bottom" :legendData="['实际']" slot="content" :isMoretooltip="true" :isCategory="false"
          barWidth="21" style="height: calc(100% - 0px)" :yAxisLineShow="true" :xAxisLineShow="true" yUnit="" />
      </StrokeTitle2>
    </div>

  </div>
</template>

<script>
  import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
  import MoreDirection3 from "@/components/echarts/bar/moreDirection3.vue"; //多个纵向柱状图上下
  import { KanbanLeft, reachStandardCount2 } from "@/api/report/complain/unstand";
  import {
    KanbanPan1,
    KanbanPan2,
    KanbanPan3,
    KanbanPan12,
  } from "@/api/echarts/seven/reachStandard";
  import NormalLine from "@/components/echarts/line/normal.vue";

  export default {
    components: {
      NormalLine,
      StrokeTitle2,
      MoreDirection3,
    },
    data() {
      return {
        model: "lastMonth",
        model2: "month",
        selectList: [
          { value: "", label: "全部" },
          { value: "1", label: "选项一" },
        ],
        // 统计数据
        top: {
          db1: 0,
          db2: 0,
          qy1: 0,
          qy2: 0,
          sj2: 0,
          sj1: 0,
          bdb2: 0,
          bdb1: 0,
        },
        top1Form: {
          jsrq: this.$getLastMonth("e"),
          ksrq: this.$getLastMonth("s"),
          // val: 1,
          ggname: null,
        },

        // 统计分析
        top21: [],
        top22: [],
        top23: [],
        top2: [],
        top2Form: {
          jsrq: this.$getLastMonth("e"),
          ksrq: this.$getLastMonth("s"),
        },
        centerForm: {
          jsrq: this.$getLastMonth("e"),
          ksrq: this.$getLastMonth("s"),
        },
        //人均产出
        center1: {
          a1: 0, //实际值
          yoy: 0, //同比
          peryoy: 0, //环比百分比
          mom: 0, //环比
          permom: 0, //同比百分比
        },
        //单班产出率
        center2: {
          a1: 0, //实际值
          yoy: 0, //同比
          peryoy: 0, //环比百分比
          mom: 0, //环比
          permom: 0, //同比百分比
        },
        //维修费用
        center3: {
          a1: 0, //实际值
          yoy: 0, //同比
          peryoy: 0, //环比百分比
          mom: 0, //环比
          permom: 0, //同比百分比
        },
        //当年十二月数据
        bottom: [],
        //当年十二月数据表单
        bottomForm: "rj",
        color: ["blue", "orange", "green", "pink"],
      };
    },
    created() {
      this.reachStandardCount1(); // 不达标趋势
      // this.reachStandardCount2(); // 统计分析
      // this.reachStandardCount3(); // 不达标统计
      this.kanbanPan1(); //人均产出
      this.kanbanPan2(); //单班产出率
      this.kanbanPan3(); //维修费用
      this.kanbanPan12(); //维修费用
    },
    methods: {
      // 不达标趋势
      radioChange1(e) {
        this.top1Form.ksrq = e[0];
        this.top1Form.jsrq = e[1];
        this.reachStandardCount1();
      },
      // selectList1(e) {
      //   console.log(e);
      //   this.top1Form.ggname = e;
      //   if (e == "全部") {
      //     this.top1Form.val = 1;
      //   } else {
      //     this.top1Form.val = 0;
      //   }
      //   this.reachStandardCount1();
      // },
      reachStandardCount1() {
        KanbanLeft(this.top1Form).then((res) => {
          if (res.code == 200) {
            this.top = res.data;
            this.top.qy1 = Number(this.top.qy1).toFixed(2);
            this.top.db1 = Number(this.top.db1).toFixed(2);
            this.top.bdb1 = Number(this.top.bdb1).toFixed(2);
            this.top.sj1 = Number(this.top.sj1).toFixed(2);
          }
        });
      },

      // 统计分析
      radioChange2(e) {
        this.centerForm.ksrq = e[0];
        this.centerForm.jsrq = e[1];
        this.kanbanPan1(); //人均产出
        this.kanbanPan2(); //单班产出率
        this.kanbanPan3(); //维修费用
      },
      // reachStandardCount2() {
      //   reachStandardCount2(this.top2Form).then((res) => {
      //     // console.log(2222, res);
      //     if (res.code == 200) {
      //       if (res.data.data1[0] == null) {
      //         this.top21 = [];
      //       } else {
      //         this.top21 = res.data.data1;
      //       }
      //       if (res.data.data2[0] == null) {
      //         this.top22 = [];
      //       } else {
      //         this.top22 = res.data.data2;
      //       }
      //       if (res.data.data3[0] == null) {
      //         this.top23 = [];
      //       } else {
      //         this.top23 = res.data.data3;
      //       }
      //       this.top2 = res.data.yData1;
      //     }
      //   });
      // },
      //人均产出
      kanbanPan1() {
        KanbanPan1(this.centerForm).then((res) => {
          if (res.code == 200) {
            this.center1 = res.data;
            this.center1.a1 = Number(this.center1.a1).toFixed(1);
            this.center1.yoy = Number(this.center1.yoy).toFixed(1);
            this.center1.mom = Number(this.center1.mom).toFixed(1);
            this.center1.peryoy = (Number(this.center1.peryoy) * 100).toFixed(1);
            this.center1.permom = (Number(this.center1.permom) * 100).toFixed(1);
          }
        });
      },
      //单班产出率
      kanbanPan2() {
        KanbanPan2(this.centerForm).then((res) => {
          if (res.code == 200) {
            this.center2 = res.data;
            this.center2.a1 = Number(this.center2.a1).toFixed(1);
            this.center2.yoy = Number(this.center2.yoy).toFixed(1);
            this.center2.mom = Number(this.center2.mom).toFixed(1);
            this.center2.peryoy = (Number(this.center2.peryoy) * 100).toFixed(1);
            this.center2.permom = (Number(this.center2.permom) * 100).toFixed(1);
          }
        });
      },
      //维修费用
      kanbanPan3() {
        KanbanPan3(this.centerForm).then((res) => {
          if (res.code == 200) {
            this.center3 = res.data;
            this.center3.a1 = Number(this.center3.a1).toFixed(1);
            this.center3.yoy = Number(this.center3.yoy).toFixed(1);
            this.center3.mom = Number(this.center3.mom).toFixed(1);
            this.center3.peryoy = (Number(this.center3.peryoy) * 100).toFixed(1);
            this.center3.permom = (Number(this.center3.permom) * 100).toFixed(1);
          }
        });
      },
      //维修费用
      kanbanPan12() {
        KanbanPan12({ bbbh: this.bottomForm }).then((res) => {
          if (res.code == 200) {
            this.bottom = res.data;
            for (let item of this.bottom) {
              item.name = item.month;
              item.value1 = item.value;
            }
          }
        });
      },
    },
  };
</script>


<style lang="scss" scoped>
  .seven_content {
    z-index: 10;
    background: #093b76;
    width: 100%;
    height: calc(100vh - 183px);
    overflow: auto;
    overflow-x: hidden;

    .content_top,
    .content_bottom,
    .content_center {
      //   background: red;
      width: 100%;
      height: 35.8%;
    }

    .content_top {
      height: 26.6%;
      // background: red;
    }

    .content_bottom {
      height: 29.9%;
    }

    .bzjk_box {
      width: 100%;
      height: 88%;
      padding: 2px 3%;

      .cntj_item {
        width: 24.5%;
        background: linear-gradient(180deg,
            rgba(44, 119, 187, 0.5) 0%,
            rgba(18, 81, 141, 0.5) 100%);
        border: 1px solid #2489ee71;
        height: 100%;
        padding: 10px;
        color: #31fcf9;

        nav {
          font-size: 18px;
          // background: rgba(35, 107, 173, 0.7);
          height: 42%;
          width: 100%;
          justify-content: space-between;
          text-align: center;

          .cntj_item_content_item {
            background: rgba(35, 107, 173, 0.7);
            width: 100%;
            height: 99%;
          }
        }

        .cntj_item_content {
          width: 100%;
          height: 56%;
          margin-top: 2%;

          .cntj_item_content_item {
            width: 100%;
            background-image: url("~@/assets/images/echarts/zhuangshi.png");
            background-size: 100% 100%;
            height: 100%;
            background-color: rgba(35, 107, 173, 0.7);

            .number {
              font-size: 32px;
            }

            .numberRight {
              color: #f52b2e;
            }

            .unit {
              font-size: 13px;
              margin-top: 0.2% !important;
              color: #ffffff;
            }
          }

          .cntj_item_content_item-100 {
            width: 100%;
          }
        }
      }

      .and {
        margin: 0 20px;
      }
    }

    .Echarts {
      height: calc(100% - 50px);
      position: relative;

      .title {
        position: absolute;
        width: 100px;
        height: 20px;
        background: rgba(0, 218, 218, 0.3);
        border-radius: 5px;
        color: #d4f0ff;
        line-height: 20px;
        font-size: 14px;
        text-align: center;
        left: 14%;
        bottom: 4%;
      }

      .title2 {
        left: 12.7%;
      }
    }

    .bdb_box {
      padding: 5px 0;
      width: 32%;
      height: 100%;
      justify-content: flex-start;
    }

    .contrasts_box {
      width: 200px;
      height: 145px;
      color: #ffffff;
      margin-left: 70px;
      font-size: 13px;

      .contrasts_box_item {
        width: 220px;
        margin: 10px 0;
        height: 65px;
        // height: 80px;
        // height: 100%;
        background: linear-gradient(180deg,
            rgba(44, 119, 187, 0.8) 0%,
            rgba(18, 81, 141, 0.8) 100%);
        border: 1px solid #3486da;
        justify-content: space-between;
        padding: 0 20px;

        .left_box {
          width: 30%;
          height: 100%;
          // padding:4% 0 0 0;

          justify-content: center;

          .jidi {
            width: 50%;
          }

          .title {
            padding: 7% 8%;
            font-size: 14px;
            color: #ffffff;
          }

          // border-bottom: 2px solid #23c3ff;
        }

        .right_box {
          width: 54%;
          background-size: 100% 100%;
          height: 86%;
          font-size: 19px;
          color: #31fcf9;
          justify-content: flex-end;
          align-items: flex-end;
          background: url("~@/assets/images/echarts/tupiandiwen.png");

          .right_box_top {
            width: 100%;
            height: 50%;
            font-size: 28px;
            text-align: left;
            justify-content: flex-end;

            .baifenbi {
              font-size: 14px;
              margin-left: 15px;
              position: relative;
              top: -7px;

              img {
                width: 8px;
                margin-left: -5px;
                position: relative;
                top: -3px;
              }
            }
          }
        }
      }
    }
  }
</style>
<style>
  .seven_content .el-table .el-table__header-wrapper th,
  .el-table .el-table__fixed-header-wrapper th {
    height: 2rem !important;
    background: #125496 !important;
  }

  .seven_content .el-table tr {
    height: 2rem !important;
  }

  .more {
    width: 135px;
    height: 22px;
    background: linear-gradient(180deg, #2c77bb 0%, #12518d 100%);
    border: 1px solid #3486da;
    border-radius: 10px;
    font-size: 14px;
    color: #d4f0ff;
    text-align: center;
    cursor: pointer;
  }

  .ring {
    width: 128px;
    height: 128px
  }
</style>